<template>
  <!-- python gen: Fri Jun 11 10:54:47 2021  -->
  <div class="yj-data-form">
    <el-form
      size="medium"
      type="flex"
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="200px"
    >
      <!-- 
          <el-col :sm="12">
          <el-form-item prop="JRXKZH" label="金融许可证号">
            <el-input
              style="width: 300px"
              v-model.trim="ruleForm.JRXKZH"
            ></el-input>
          </el-form-item>
        </el-col> -->

      <el-col :sm="12">
        <el-form-item prop="username" label="登录名">
          <el-input
            maxlength="30"
            style="width: 300px"
            v-model.trim="ruleForm.username"
          ></el-input>
        </el-form-item>
      </el-col>

      <el-col :sm="12">
        <el-form-item prop="nickName" label="昵称">
          <el-input
            maxlength="30"
            style="width: 300px"
            v-model.trim="ruleForm.nickName"
          ></el-input>
        </el-form-item>
      </el-col>

      <el-col :sm="12">
        <el-form-item prop="phone" label="手机号码">
          <el-input
            maxlength="30"
            style="width: 300px"
            v-model.trim="ruleForm.phone"
          ></el-input>
        </el-form-item>
      </el-col>

      <el-col :sm="12">
        <el-form-item prop="email" label="邮箱">
          <el-input
            maxlength="30"
            style="width: 300px"
            v-model.trim="ruleForm.email"
          ></el-input>
        </el-form-item>
      </el-col>

      <el-col :sm="12">
        <el-form-item prop="gender" label="性别">
          <!-- <el-input
            maxlength="30"
            style="width: 300px"
            v-model.trim="ruleForm.enabled"
          ></el-input> -->

          <el-radio v-model="ruleForm.gender" label="男">男</el-radio>
          <el-radio v-model="ruleForm.gender" label="女">女</el-radio>
        </el-form-item>
      </el-col>
      <el-col :sm="12">
        <el-form-item prop="enabled" label="状态">
          <!-- <el-input
            maxlength="30"
            style="width: 300px"
            v-model.trim="ruleForm.enabled"
          ></el-input> -->

          <el-radio v-model="ruleForm.enabled" label="1">启用</el-radio>
          <el-radio v-model="ruleForm.enabled" label="0">停用</el-radio>
        </el-form-item>
      </el-col>
      <el-col :sm="12">
        <el-form-item prop="deptId" label="上级部门">
          <treeselect
            v-model="ruleForm.deptId"
            :options="deptselect"
            style="width: 300px;"
            placeholder="选择部门"
          />
        </el-form-item>
      </el-col>
      <el-col :sm="12">
        <el-form-item prop="roleIds" label="角色">
          <el-select
            style="width: 300px;"
            v-model="ruleForm.roleIds"
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in roleselect"
              :key="item.oid"
              :label="item.name"
              :value="item.oid"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "sysuserForm",
  props: ["flag", "item", "deptselect", "roleselect"],
  components: {
    Treeselect
  },
  data() {
    return {
      formDisableFlag: false,
      ruleForm: {
        roleIds: [],
        oid: "",

        deptId: "",

        username: "",

        nickName: "",

        gender: "",

        phone: "",

        email: "",

        avatarName: "",

        avatarPath: "",

        password: "",

        isAdmin: "",

        enabled: ""
      },
      rules: {
        CHECK_ID: [
          // { required: true, message: "不能为空", trigger: "blur" }
        ],

        oid: [
          // { required: true, message: "不能为空", trigger: "blur" }
        ],

        deptId: [
          // { required: true, message: "不能为空", trigger: "blur" }
        ],

        username: [{ required: true, message: "不能为空", trigger: "blur" }],

        nickName: [
          // { required: true, message: "不能为空", trigger: "blur" }
        ],

        gender: [
          // { required: true, message: "不能为空", trigger: "blur" }
        ],

        phone: [{ required: true, message: "不能为空", trigger: "blur" }],

        email: [
          // { required: true, message: "不能为空", trigger: "blur" }
        ],

        avatarName: [
          // { required: true, message: "不能为空", trigger: "blur" }
        ],

        avatarPath: [
          // { required: true, message: "不能为空", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    goAdd() {
      Object.keys(this.ruleForm).forEach(key => (this.ruleForm[key] = ""));
      // this.ruleForm.enabled = 0;
    },
    goUpdate() {
      //   Object.keys(this.ruleForm).forEach(key => (this.ruleForm[key] = ""));
      //   //   this.dialogFormVisible = true;
      //   this.ruleForm.enabled = true;
    },
    validateIt() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          this.$emit("goSave", null);
        }
      });
    }
  },
  mounted() {
    this.ruleForm = this.item;
    if ("add" === this.flag) {
      this.goAdd();
    }

    // if ("update" === this.flag) {
    //   this.goUpdate();
    // }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .vue-treeselect__control,
::v-deep .vue-treeselect__placeholder,
::v-deep .vue-treeselect__single-value {
  height: 30px;
  line-height: 30px;
}
</style>
